

{% assign product_ids = block.products | get_array_values: "id" | join: "," %}


<div class="zuui-video-item" data-product="{{product_ids}}" data-user-name="{{video.channel.snippet.title }}" data-avatar="{{video.channel.snippet.thumbnails.medium.url }}"  data-video-info='{url:"{{block.video.model}}",date:"{{video.snippet.publishedAt }}"}'>
  
  <div class="youtube_pic">
    {% if video.snippet.thumbnails.medium.url %}
    <img src="{{video.snippet.thumbnails.medium.url}}"> 
    <div class="youtube-icon-hover">
    <svg t="1648098679668"  class="youtube-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2931" width="58" height="58"><path fill="#ddd" d="M941.3 296.1c-10.3-38.6-40.7-69-79.2-79.3C792.2 198 512 198 512 198s-280.2 0-350.1 18.7C123.3 227 93 257.4 82.7 296 64 366 64 512 64 512s0 146 18.7 215.9c10.3 38.6 40.7 69 79.2 79.3C231.8 826 512 826 512 826s280.2 0 350.1-18.8c38.6-10.3 68.9-40.7 79.2-79.3C960 658 960 512 960 512s0-146-18.7-215.9zM423 646V378l232 133-232 135z" p-id="2932"></path></svg>
    </div>
    {% else %}
    {% include 'icon_video' ,width:'60',height:'60' %}
    {% endif %}
    {% if video.contentDetails.duration %}
    <div class="youtube_pic-item" data-date="{{video.contentDetails.duration}}"></div>
    {% endif %}
    
  </div>
  <div class="youtube_info">
    {% if video != "" %}
    <div class="youtube_name text-white-space">{{video.snippet.title | default:"Title"}}</div>
    {% else %}
    <div class="youtube_name text-ellipsis">Title</div>
    {% endif %}

    {% if video != "" %}
    <div class="youtube_detail line-clamp2">{{video.snippet.description}}</div>
    {% endif %}
  </div>
  <div class="youtube_bom">
    <a class="youtube_bom-item" href="javascript:void(0);">
      <svg t="1646975399105" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6233" width="22" height="22"><path d="M1006.04992 470.016C997.60192 455.232 830.81792 128 507.74592 128S17.95392 455.232 9.50592 470.016a80.768 80.768 0 0 0 0 76.032c8.448 14.784 175.232 342.08 498.24 342.08s489.856-327.296 498.304-342.08a95.168 95.168 0 0 0 0-76.032z m-498.304 333.632c-274.432 0-422.4-295.616-422.4-295.616s147.84-295.616 422.4-295.616 422.4 295.616 422.4 295.616-147.904 295.616-422.4 295.616z" fill="#999999" p-id="6234"></path><path d="M507.74592 339.008a168.896 168.896 0 1 0 168.96 168.896 169.408 169.408 0 0 0-168.96-168.896z m0 253.376a84.48 84.48 0 1 1 84.48-84.48 84.736 84.736 0 0 1-84.48 84.608z" fill="#999999" p-id="6235"></path></svg>
      {%- capture viewCount -%}
      {%- if video.statistics.viewCount > 100 -%}
        {{video.statistics.viewCount | divided_by : 100 | round | divided_by : 10 }}K
      {% else %}
        {{video.statistics.viewCount | default : "0" }}
      {%- endif -%}
      {%- endcapture -%}
      <span class="num viewCount text-white-space">{{viewCount}}</span>
    </a>
    <a class="youtube_bom-item" href="javascript:void(0);">
      <svg t="1646992094146" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9317" width="22" height="22"><path d="M1015.68 507.84a38.4 38.4 0 0 1-1.152 13.376l-85.696 378.24a40.064 40.064 0 0 1-5.696 12.288 116.16 116.16 0 0 1-104.576 64.512h-550.4a39.232 39.232 0 0 1-11.84 0H109.952a40.96 40.96 0 0 1-6.4 0.512 39.616 39.616 0 0 1-39.616-39.616l0.32-476.096a39.68 39.68 0 0 1 39.68-39.616 40.192 40.192 0 0 1 4.864 0.32l131.584-0.32v-0.768a237.632 237.632 0 0 0 220.416-230.4c0-3.456-0.512-6.912-0.512-10.432a115.2 115.2 0 0 1 227.712-26.048h0.576a416.832 416.832 0 0 1-13.184 227.712h221.312a37.504 37.504 0 0 1 6.016 0.512 117.376 117.376 0 0 1 112.896 126.08m-872.32 388.608h79.296v-396.16H143.36l-0.32 395.968z m788.096-417.792a38.4 38.4 0 0 0-34.56-17.984l-279.744-0.32a39.552 39.552 0 0 1-35.52-57.216l-0.448-0.32a335.232 335.232 0 0 0 33.92-95.552h0.512a288.512 288.512 0 0 0 5.184-62.464 361.472 361.472 0 0 0-6.016-62.208V181.12a37.12 37.12 0 1 0-74.176 0v2.496h-0.512a342.912 342.912 0 0 1-5.504 63.104 282.176 282.176 0 0 1-9.728 36.352 316.16 316.16 0 0 1-222.144 207.744l-0.384 406.144h516.736a34.752 34.752 0 0 1 5.184 0.384 37.632 37.632 0 0 0 14.912-5.44 36.864 36.864 0 0 0 14.272-16.96l82.496-364.16h-0.32a38.4 38.4 0 0 0-3.904-32" p-id="9318" fill="#999999"></path></svg>
      {%- capture likeCount -%}
      {%- if video.statistics.likeCount > 100 -%}
        {{video.statistics.likeCount | divided_by : 100 | round | divided_by : 10 }}K
      {% else %}
        {{video.statistics.likeCount | default : "0" }}
      {%- endif -%}
      {%- endcapture -%}
      <span class="num likeCount text-white-space">{{likeCount}}</span>
    </a>
    <a class="youtube_bom-item" href="javascript:void(0);">
      <svg t="1646975438725" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6459" width="22" height="22"><path d="M852.736 128h-710.4A78.592 78.592 0 0 0 63.808 206.528v518.4a78.592 78.592 0 0 0 78.528 78.528h186.88l144.64 118.08a39.104 39.104 0 0 0 24.576 8.704 38.4 38.4 0 0 0 24.384-8.704l145.408-118.08h184.192a78.592 78.592 0 0 0 78.528-78.528v-518.4A78.464 78.464 0 0 0 852.736 128z m0.96 596.992a1.088 1.088 0 0 1-0.96 0.96h-197.952a38.4 38.4 0 0 0-24.448 8.704l-131.648 106.816-130.88-106.816a38.784 38.784 0 0 0-24.512-8.704H142.528a1.088 1.088 0 0 1-0.96-0.96v-518.4a1.088 1.088 0 0 1 0.96-0.96h710.4a1.024 1.024 0 0 1 0.96 0.96v518.4z" p-id="6460" fill="#999999"></path><path d="M265.088 466.752a48.448 48.448 0 1 0 48.448-48.512 48.448 48.448 0 0 0-48.448 48.512z" p-id="6461" fill="#999999"></path><path d="M450.24 466.752a48.448 48.448 0 1 0 48.448-48.512 48.448 48.448 0 0 0-48.448 48.512z" p-id="6462" fill="#999999"></path><path d="M635.584 466.752a48.448 48.448 0 1 0 48.448-48.512 48.448 48.448 0 0 0-48.448 48.512z" p-id="6463" fill="#999999"></path></svg>
      {%- capture commentCount -%}
      {%- if video.statistics.commentCount > 100 -%}
        {{video.statistics.commentCount | divided_by : 100 | round | divided_by : 10 }}K
      {% else %}
        {{video.statistics.commentCount | default : "0" }}
      {%- endif -%}
      {%- endcapture -%}
      <span class="num commentCount text-white-space">{{commentCount}}</span>
    </a>
  </div>
</div>